<template>
  <div class="box">
    <div class="box-leftppm">台州市欧博光电有限公司</div>
    <div>
      <icon-menu-fold v-if="!topMenu && appPinia.device === 'mobile'" style="font-size: 22px; cursor: pointer" @click="toggleDrawerMenu" />
    </div>
    <div class="box-right">
      <ul class="box-right-ul">
        <li>
          <a-tooltip :content="theme === 'light' ? '点击切换为暗黑模式' : '点击切换为亮色模式'">
            <a-button class="nav-btn" type="outline" :shape="'circle'" @click="handleToggleTheme">
              <template #icon>
                <icon-moon-fill v-if="theme === 'dark'" />
                <icon-sun-fill v-else />
              </template>
            </a-button>
          </a-tooltip>
        </li>
        <li>
          <a-tooltip content="消息通知">
            <a-badge :count="9" dot>
              <a-button class="nav-btn" type="outline" :shape="'circle'" @click="setPopoverVisible">
                <icon-notification />
              </a-button>
            </a-badge>
          </a-tooltip>
        </li>
        <li class="box-right-ul-li">
          <a-dropdown trigger="click">
            <a-avatar :size="32">
              <!--              <img src="">-->
            </a-avatar>
            <template #content>
              <a-doption class="doptiona powss" @click="distributeTheTasks('个人中心')">
                <!--                <div>-->
                <!--                  {{ userInFo ? userInFo?.userName : 'admin' }}-->
                <!--                  <span class="namePow">({{ phoneFormat(userInFo ? userInFo?.mobilePhone : '18888888888') }})</span>-->
                <!--                </div>-->
                <div class="bmwiosn">
                  <icon-user />
                  个人中心 <span style="padding: 2px"></span>
                </div>
              </a-doption>
              <!--              <a-doption class="doptiona" @click="distributeTheTasks('修改密码')">-->
              <!--                <icon-eye />-->
              <!--                <span class="box-right-basic-ul-li-span">修改密码</span>-->
              <!--              </a-doption>-->
              <a-doption class="doptiona" @click="distributeTheTasks('退出登录')">
                <icon-export />
                <span class="box-right-basic-ul-li-span">退出登录</span>
              </a-doption>
            </template>
          </a-dropdown>
        </li>
      </ul>
    </div>
  </div>

  <a-modal v-model:visible="visible" @ok="handleOk" @cancel="handleCancel">
    <template #title> 修改密码</template>
    <div></div>
  </a-modal>
</template>

<script lang="ts">
import { toRefs } from 'vue';
import importConfig from './deskHeader.ts';
import { phoneFormat } from '@/utils/baseMethods';

export default {
  setup() {
    const { base, theme, topMenu, appPinia, handleToggleTheme, distributeTheTasks, toggleDrawerMenu } = importConfig();
    return {
      ...toRefs(base),
      theme,
      topMenu,
      appPinia,
      handleToggleTheme,
      distributeTheTasks,
      phoneFormat,
      toggleDrawerMenu,
    };
  },
};
</script>

<style lang="less" scoped>
.box {
  height: 100%;
  width: calc(100% - 30px);
  display: flex;
  justify-content: space-between;
  padding: 0px 15px;
  &-leftppm {
    font-size: 24px;
    font-weight: 900;
  }
  &-left {
    height: 100%;
    float: left;

    &-logo {
      padding-top: 10px;
    }

    &-logo > img {
      width: 170px;
    }
  }

  &-right {
    height: 100%;
    display: flex;
    justify-items: end;
    //padding-right: 40px;

    &-avatar {
      width: 32px;
      height: 32px;
      font-size: 16px;
    }

    &-basic {
      padding: 10px;
      width: 230px;
      background-color: var(--color-bg-popup);

      &-ul {
        margin: 0px;
        padding: 0px;
        list-style: none;
        font-weight: bold;

        &-li {
          margin: 15px 30px;
          display: block;

          &-import {
            vertical-align: middle;
          }

          &-span {
            vertical-align: middle;
          }
        }
      }
    }

    &-ul {
      margin: 0px;
      padding: 0px;
      list-style: none;
      display: flex;
      align-items: center;

      li {
        margin-right: 10px;
        display: flex;
        align-items: center;
      }

      &-li {
        line-height: 58px;
      }
    }
  }
}

.doptiona {
  //width: 180px;
}

.powss {
  //border-bottom: 1px dotted black;
  //padding-bottom: 10px;
}

.namePow {
  font-size: 12px;
}

.bmwiosn {
  color: rgb(98, 84, 150);
}

.nav-btn {
  border-color: rgb(var(--gray-2));
  color: rgb(var(--gray-8));
  font-size: 16px;
}
</style>
